<style lang="scss">

  .x-xian {
    position: relative;
    padding: 20px;
    &.running {
      background: antiquewhite;
    }
    .battle {
      display: flex;
      .left, .right {
        width: 50%;
      }
    }
  }
</style>
<template>
  <div class="x-xian" :class="game.stage">
    <button @click="start()">开始</button>
    <button @click="pause()">暂停</button>
    <button @click="stop()">停止</button>
    <div class="battle">
      <div class="left">
        <div class="profile">
          <div class="name">{{hero.name}}</div>
          <x-field class="age" label="年龄" :value="hero.age" unit="岁"></x-field>
          <div class="nengLi">
            <x-field class="hp" label="生命值" :value="hero.status.hp"></x-field>
            <x-field class="hp" label="攻击力" :value="hero.status.atk"></x-field>
            <x-field class="hp" label="防御力" :value="hero.status.def"></x-field>
            <x-field class="speed" label="速度" :value="hero.status.def"></x-field>
          </div>
        </div>
        <div class="backpack"></div>
      </div>
      <div class="right">
        <div class="profile">
          <div class="name">{{enemy.name}}</div>
          <div class="nengLi">
            <x-field class="hp" label="生命值" :value="enemy.status.hp"></x-field>
            <x-field class="hp" label="攻击力" :value="enemy.status.atk"></x-field>
            <x-field class="hp" label="防御力" :value="enemy.status.def"></x-field>
            <x-field class="speed" label="速度" :value="enemy.status.def"></x-field>
          </div>
        </div>
        <div class="backpack"></div>
      </div>
    </div>
    <div class="x-logs">
      <x-log v-for="(log,index) in logger.last(10)" :key="log.index" v-bind="log"></x-log>
    </div>
    <div class="x-status-bar"></div>
  </div>
</template>

<script>
  import sprite from '../db/sprite';
  import logger from '../db/logger';
  import XField from "./XField";
  import XLog from "./XLog";

  let GAME_STAGE = {
    wait: 'wait',
    running: 'running',
    pause: 'pause'
  };

  export default {
    components: {
      XLog,
      XField
    },
    data() {
      return {
        count: 0,
        hero: {},
        enemy: {},
        setting: {},
        game: {
          interval: 0,
          stage: GAME_STAGE.wait,
          round: 0
        },
        logger: new logger.Logger()
      }
    },
    computed: {},
    created() {
      this.init();
    },
    mounted() {
    },
    methods: {
      init() {
        this.hero = new sprite.Hero('英雄');
        this.enemy = new sprite.Enemy('敌人');
      },
      start() {
        if (this.game.stage !== GAME_STAGE.running) {
          this.game.stage = GAME_STAGE.running;
          this.game.interval = setInterval(() => {
            if (this.game.round === 0) {
              this.update();
            }
          }, 1000);
        }
      },
      pause() {
        this.game.stage = GAME_STAGE.pause;
        clearInterval(this.game.interval);
      },
      stop() {
        this.game.stage = GAME_STAGE.wait;
        clearInterval(this.game.interval);
      },
      update() {
        this.logger.push(`----战斗开始----`);
        let battle = setInterval(() => {
          this.game.round++;
          if (this.game.round > 3) {
            clearInterval(battle);
            this.game.round = -1;
            this.logger.push(`----战斗结束----`);
          } else {
            this.logger.push(`----第[${this.game.round}]回合----`);
            this.updateRound();
          }
        }, 500);
      },
      updateRound() {
        this.logger.push('出手顺序:' + this.getOrder().map(item => item.name).join('->'));
        this.getOrder().forEach(item => {
          if (item.type === sprite.SPRITE_TYPE.hero) {
            this.updateHero(item);
          } else if (item.type === sprite.SPRITE_TYPE.enemy) {
            this.updateEnemy(item);
          }
        })
      },
      updateHero(hero) {
        this.enemy.status.hp -= hero.status.atk;
      },
      updateEnemy(enemy) {
        this.hero.status.hp -= enemy.status.atk;
      },
      battleOver(enemy) {

      },
      getOrder() {
        let order = [this.enemy, this.hero];
        order.sort((a, b) => a.nengLi.speed - b.nengLi.speed);
        return order;
      }
    },
  }
</script>
